پیاده سازی قابلیت جستجو تعاملی با توابع AJAX
مثال زیر یک کادر با قابلیت جستجوی تعاملی و زنده را پیاده سازی می کند که در آن به هنگام درج واژگان مورد نیاز در کادر و بدون بارگذاری مجدد کل صفحه، کاربر بلافاصله نتایج دلخواه را مشاهده می کند.
قابلیت جستجوی تعاملی و زنده (Live search) در مقایسه با جستجو به روش قدیمی، از مزایای زیر برخوردار می باشد:
- همین که کاربر در حال تایپ واژگان جستجو در کادر می باشد، نتایج در لحظه برای وی نمایش داده می شوند.
- همین که کاربر تایپ را ادامه می دهد، نتایج جستجو محدود و محدودتر می شود.
- زمانی که نتایج بیش از حد محدود می شود، کاربر می تواند با حذف تعدادی از کاراکترها در کادر، موارد بیشتری را مشاهده کند.
نمونه ی زیر یک کادر با قابلیت جستجوی تعاملی و نمایش نتایج در لحظه را نمایش می دهد:
نتایجی که در مثال بالا مشاهده می کنید، داخل یک فایل XML قرار دارد که محتوای آن را در زیر مشاهده می کنید:
HTML a tag https://www.w3schools.com/tags/tag_a.asp HTML br tag https://www.w3schools.com/tags/tag_br.asp CSS background Property https://www.w3schools.com/cssref/css3_pr_background.asp CSS border Property https://www.w3schools.com/cssref/pr_border.asp JavaScript Date Object https://www.w3schools.com/jsref/jsref_obj_date.asp JavaScript Array Object https://www.w3schools.com/jsref/jsref_obj_array.asp
شرح مثال:
صفحه ی HTML
زمانی که کاربر یک کاراکتر را در فیلد ورودی بالا درج می کند، تابع "showResult()" فراخوانی و اجرا می شود. تابع ذکر شده به دنبال اتفاق افتادن رخداد "onkeyup" (رها شدن دکمه پس از درج کلمه توسط کاربر) فراخوانی می شود:
شرح کد:
زمانی که فیلد یا کادر جستجو تهی است (str.length==0)، تابع محتوای پارامتر مکان نگهدار (placeholder) livesearch را پاک کرده و از تابع خارج می شود.
اگر input field تهی نبود، تابع showResult() عملیات ذیل را به ترتیب انجام می دهد:
- یک آبجکت XMLHttpRequest ایجاد می کند.
- تابعی را ایجاد می کند که به هنگام آماده شدن پاسخ سرویس دهنده (server response)، فراخوانی شده و اجرا می شود.
- درخواست را به فایل مستقر در سرویس دهنده هدایت می کند.
- یک پارامتر (q) (به همراه محتوای فیلد) به URL اضافه می کند.
فایل PHP
صفحه ی مورد نظر از اپلیکیشن تحت وب که کد JavaScript آن را فراخوانی می کند، یک فایل PHP به نام "livesearch.php" می باشد.
کد موجود در فایل "livesearch.php" به دنبال عنوان هایی (المان های title) که با عبارت جستجو (search string) منطبق هستند، داخل فایل XML می گردد و در صورت یافتن نتایج مورد نیاز آن ها را واکشی می کند:
load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
$hint="";
for($i=0; $i<($x->length); $i++) {
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1) {
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
if ($hint=="") {
$hint="" .
$y->item(0)->childNodes->item(0)->nodeValue . "";
} else {
$hint=$hint . "
" .
$y->item(0)->childNodes->item(0)->nodeValue . "";
}
}
}
}
}
// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
} else {
$response=$hint;
}
//output the response
echo $response;
?>
زمانی که اسکریپت یا کد مربوطه ی JavaScript ((strlen($q) > 0))، متنی را به سرویس دهنده ارسال می کند، اتفاقات زیر به ترتیب رخ می دهند:
- محتوای یک فایل XML داخل آبجکت XML DOM در حافظه بارگذاری می شود.
- داخل تمامی المان های title حلقه زده (می چرخد) و تا (زمانی که) مورد منطبق با متن ارسال شده از کد JavaScript را پیدا کند.
- url صحیح و title مناسب را در متغیر "$response" ذخیره می کند. زمانی که مورد منطبق بیش از یک آیتم باشد، در آن صورت تمامی موارد منطبق و یافت شده داخل متغیر مزبور قرار داده می شوند.
- اگر هیچ مورد منطبقی یافت و استخراج نشد، مقدار متغیر $response برابر رشته ی "no suggestion" تنظیم می شود.